<template>
  <div class="parameterConfiguration">
    <el-card shadow="hover">
      <div class="searchBox">
        <h3 class="h3">测试结果配置</h3>
        <div class="itemBox">
          <el-button @click="addConfigurationBtn">添加</el-button>
        </div>
      </div>
      <el-form :model="model" ref="form">
        <el-table :data="model.tableData" style="width: 100%">
          <el-table-column prop="id" label="最低分">
            <template #header> 最低分 <span class="red">*</span> </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.' + 'min'"
                :rules="rules.rule"
              >
                <el-input
                  v-model="scope.row.min"
                  @change="() => isMin(scope.row)"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="最高分">
            <template #header> 最高分 <span class="red">*</span> </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.' + 'max'"
                :rules="rules.rule"
              >
                <el-input
                  v-model="scope.row.max"
                  @change="() => isMax(scope.row)"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="想要的是">
            <template #header> 想要的是 <span class="red">*</span> </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.' + 'want'"
                :rules="rules.rule"
              >
                <el-input v-model="scope.row.want"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="你是一个">
            <template #header> 你是一个 <span class="red">*</span> </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.' + 'you'"
                :rules="rules.rule"
              >
                <el-input v-model="scope.row.you"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="补充评价">
            <template #header> 补充评论 <span class="red">*</span> </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.' + 'comments'"
                :rules="rules.rule"
              >
                <el-input v-model="scope.row.comments"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="相同人数百分比">
            <template #header>
              相同人数百分比 <span class="red">*</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.' + 'sameRate'"
                :rules="rules.rule"
              >
                <el-input v-model="scope.row.sameRate"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="匹配人数百分比">
            <template #header>
              匹配人数百分比 <span class="red">*</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.' + 'matchingRate'"
                :rules="rules.rule"
              >
                <el-input v-model="scope.row.matchingRate"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="处理">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="info"
                plain
                @click="dleBtn(scope.row, scope.$index)"
                >删除</el-button
              >
              <el-button
                v-show="scope.row.id !== ''"
                size="mini"
                type="success"
                plain
                @click="upDataBtn(scope.row, scope.$index)"
                >更新</el-button
              >
              <el-button
                v-show="scope.row.id == ''"
                size="mini"
                type="primary"
                plain
                @click="addBtn(scope.row, scope.$index)"
                >确认</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  systemTestAdd,
  systemTestList,
  systemTestUpdata,
  systemTestDel,
} from "@/api/operationManagement";
export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      model: {
        tableData: [
          {
            id: "1",
            min: "1",
            max: "2",
            want: "3",
            you: "4",
            comments: "5",
            sameRate: "6",
            matchingRate: "999",
          },
        ],
      },
      rules: {
        rule: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
    };
  },
  methods: {
    //分页
    getList() {
      systemTestList().then((res) => {
        if (res.code == 0) {
          this.model.tableData = res.data.list;
        }
      });
    },

    // 添加字段按钮
    addConfigurationBtn() {
      // 向表格数组中数据添加一行
      this.model.tableData.push({
        id: "",
        min: "",
        max: "",
        want: "",
        comments: "",
        sameRate: "",
        matchingRate: "",
      });
    },
    //删除按钮
    dleBtn(obj, index) {
      if (obj.id == "") {
        this.model.tableData.splice(index, 1);
      } else {
        this.$confirm("此操作将永久删, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            systemTestDel({ id: obj.id }).then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功！",
                });
                this.getList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    //添加
    addBtn(obj, index) {
      let a = this.rowValidate(index);
      console.log(a);
      if (a) {
        systemTestAdd(obj).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "添加成功！",
            });
            this.getList();
          }
        });
      }
    },
    //更新
    upDataBtn(obj, index) {
      let a = this.rowValidate(index);
      console.log(a);

      if (a) {
        systemTestUpdata(obj).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "更新成功！",
            });
            this.getList();
          }
        });
      }
    },
    //验证每一行
    rowValidate(index) {
      let value = [];
      this.$refs.form.validateField(
        [
          `tableData.${index}.you`,
          `tableData.${index}.min`,
          `tableData.${index}.max`,
          `tableData.${index}.want`,
          `tableData.${index}.comments`,
          `tableData.${index}.sameRate`,
          `tableData.${index}.matchingRate`,
        ],
        (err) => {
          if (!err) {
            console.log("验证成功");
            value.push(true);
          } else {
            console.log("验证失败");
            value.push(false);
          }
        }
      );

      return value.every((item) => item == true);
    },
    //验证最高分是否小于最低分
    isMax(obj) {
      if (obj.min || obj.min === 0) {
        if (obj.max < obj.min) {
          this.$message({
            type: "error",
            message: "最大值不能小于最小值！",
          });
          obj.max = "";
        }
      }
    },
    isMin(obj) {
      if (obj.max || obj.max === 0) {
        if (obj.max < obj.min) {
          this.$message({
            type: "error",
            message: "最大值不能小于最小值！",
          });
          obj.min = "";
        }
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.parameterConfiguration {
  margin: 30px;
  height: 100%;
  .searchBox {
    display: flex;
    margin-bottom: 20px;
    .h3 {
      width: 50%;
    }
    .itemBox {
      display: flex;
      justify-content: flex-end;
      flex: 1;
      .el-button {
        height: 40px;
      }
    }
  }
  .red {
    color: red;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>